<template>
  <view class="goods">
    <view class="top">
      <view class="name">
        <image src="../../static/images/fh.png" mode="" @click="fanhui"></image>
        商品
      </view>


      <!-- 商品页 -->
      <view class="main">
        <view class="nav">
          <view class="">综合</view>
          <view class="">价格<image src="../../static/images/qiehuan.png" mode=""></image>
          </view>
          <view class="">折扣<image src="../../static/images/qiehuan.png" mode=""></image>
          </view>
        </view>
        <view class="goods" v-for="(item, index) in goods" :key="index"
          @click="$Router.push({ path: '/pages/goods/detail', query: { id: 2 } })">
          <image :src="item.image" mode=""></image>
          <view class="gtitle">{{item.name}}</view>
          <view class="" style='margin-top:27rpx;padding-bottom:20rpx;'> <span class="yellow">{{item.name21}}</span>
            <span class="s"><s>{{item.name22}}</s></span></view>
          <view class="jiazhi">{{item.name3}}</view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // name: "这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子这是一个测试的标题的例子，这是一个测试的标题的例子，这是一个测试的标题的例子",
        textHeight: null,
        status: false,
        idShowText: false,
        goods: [{
            image: require("../../static/images/goods1.png"),
            name: "【新疆、西藏不发货】得鲜爱可按钮口红+糖果唇釉 各1111111111111111111",
            name21: "120积分",
            name22: "300积分",
            name3: "价值￥99.00"
          },
          {
            image: require("../../static/images/goods1.png"),
            name: "【新疆、西藏不发货】得鲜爱可按钮口红+糖果唇釉 各1111111111111111111",
            name21: "20积分",
            name22: "300积分",
            name3: "价值￥99.00"
          },
          {
            image: require("../../static/images/goods1.png"),
            name: "【新疆、西藏不发货】得鲜爱可按钮口红+糖果唇釉 各1111111111111111111",
            name21: "100积分",
            name22: "300积分",
            name3: "价值￥99.00"
          },
        ]
      };
    },
    mounted() {
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     this.calculateText();
      //   }, 300);
      // });
    },
    methods: {
      fanhui() {
        this.$Router.back()
      }

    }
  };
</script>

<style lang="scss" scoped>
  .top {
    padding-top: var(--status-bar-height);

    .name {
      background: #F9A81F;
      text-align: center;
      position: relative;
      overflow: hidden;
      padding: 36rpx 0;
      color: white;
      font-size: 30rpx;

      image {
        width: 21rpx;
        height: 39rpx;
        position: absolute;
        left: 30rpx;
      }
    }

    .title {
      box-shadow: 0px 0px 20px #F1F1F1;
      width: 710rpx;
      margin: 0 auto;
      border-radius: 15rpx;
      background-color: white;

      .store {
        overflow: hidden;

        image {
          width: 96rpx;
          height: 96rpx;
          float: left;
          padding: 38rpx 35rpx;
        }

        .titles {
          font-size: 30rpx;
          font-weight: bold;
          float: left;
          width: 500rpx;
          margin-top: 38rpx;

          .time {
            overflow: hidden;
            margin-top: 38rpx;

            span {
              padding-right: 30rpx;
              font-weight: bold;
            }
          }
        }
      }
    }

    .main {
      overflow: hidden;

      .nav {
        background: white;
        display: flex;
        justify-content: space-around;

        view {
          width: 30%;
          text-align: center;
          padding: 30rpx 0;

          image {
            width: 18rpx;
            height: 21rpx;
            padding-left: 5rpx;
          }
        }

      }

      .goods {
        background: white;
        margin-top: 24rpx;
        margin-left: 20rpx;
        float: left;
        width: 340rpx;
        border-radius: 15rpx;
        // border:1px solid red;
        position: relative;

        .gtitle {
          padding: 0 10rpx;
          font-size: 24rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 这里是超出几行省略 */
          overflow: hidden;
        }

        image {
          width: 340rpx;
          height: 340rpx;
        }

        .jiazhi {
          width: 155rpx;
          height: 48rpx;
          color: white;
          line-height: 48rpx;
          font-size: 24rpx;
          background: #F9A81F;
          border-radius: 0px 22rpx 26rpx 0px;
          position: absolute;
          top: 27rpx;
        }

        .yellow {
          color: #FAB543;
          font-weight: bold;
          padding-left: 20rpx;
        }

        .s {
          font-size: 20rpx;
          padding-left: 20rpx;
        }
      }
    }

  }

  .jianjie {
    padding: 20rpx 20rpx;
    position: relative;

    .titleText {
      font-size: 24rpx;
    }

    .openClose {
      width: 100rpx;
      height: 41rpx;
      background: #F7F7F7;
      border-radius: 21rpx;
      text-align: center;
      font-size: 14px;
      position: relative;
      top: 20rpx;
      left: 270rpx;
    }

    .statusText {
      overflow: hidden;
      display: block;
    }
  }
</style>
